import {
  defineConfig,
  presetUno,
  transformerVariantGroup,
  transformerDirectives,
  presetIcons,
  type UserConfig,
} from 'unocss';
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders';
import presetRemToPx from '@unocss/preset-rem-to-px';
import transformerCompileClass from '@unocss/transformer-compile-class';

export const defaultConfig: UserConfig = {
  presets: [
    presetRemToPx({
      baseFontSize: 4,
    }),
    presetUno(),
    presetIcons({
      collections: {
        icons: FileSystemIconLoader(
          './src/common/icons',
          svg => svg.replace(/#1180FF/ig, 'currentColor').replace(/#2D2D2D/ig, 'currentColor'),
        ),
      },
    }),
  ],
  transformers: [
    transformerCompileClass(),
    transformerVariantGroup(),
    transformerDirectives(),
  ],
  theme: {
    container: {
      center: true,
      maxWidth: {
        sm: '1200px',
        md: '1200px',
        lg: '1200px',
        xl: '1200px',
        '2xl': '1200px',
      },
    },
    colors: {
      'text-1': '#575757',
      'text-2': '#292929',
      'text-3': '#8B8B8B',
      'primary-1': '#3D7CFA',
      'primary-2': '#345DE2',
      'gray-1': '#9A9EA6',
      'gray-2': '#F7F7F7',
      'gray-3': '#7D8389',
    },
  },
  shortcuts: {
    'flex-center': 'flex items-center justify-center',
    'flex-x-center': 'flex justify-center',
    'flex-y-center': 'flex items-center',
  },
};

export default defineConfig(defaultConfig);
